<script setup>
import commentLists from './comment-lists.vue'
import { ref } from 'vue'

const comments = ref([
    { id: 1, author: '用户1', avatar: '', content: '这是一条评论内容', time: '下午3:00' },
    { id: 2, author: '用户2', avatar: '', content: '另一条评论内容', time: '下午3:05' }
])

const articleInfo = ref({
    title: '我的博客文章标题',
    content: '什么时候才能把这篇文章给写好呢？才能把这个网页给写好呢？感觉好累好好好啊！这里可以放置更多的文章内容...',
    author: {
        name: '作者名',
        avatar: '',
        bio: '前端开发者，热爱技术分享',
        publishTime: '2025年9月28日下午2点26分'
    },
    tags: ['前端', 'Vue', 'CSS'],
    readCount: 1234,
    likeCount: 56
})

const directory = ref([
    { id: 1, title: '文章介绍', level: 1 },
    { id: 2, title: '技术实现', level: 1 },
    { id: 3, title: 'Vue3 组合式API', level: 2 },
    { id: 4, title: '样式设计', level: 2 },
    { id: 5, title: '总结', level: 1 }
])

// 点赞功能
const handleLike = () => {
    articleInfo.value.likeCount++
}

// 目录点击滚动
const scrollToSection = (index) => {
    // 这里可以实现滚动到对应章节的功能
    console.log('滚动到章节:', index)
}
</script>

<template>
    <div class="main">
        <div class="content">
            <!-- 目录区域 -->
            <div class="directory">
                <h3>文章目录</h3>
                <ul>
                    <li v-for="item in directory" :key="item.id" :class="`level-${item.level}`"
                        @click="scrollToSection(item.id)">
                        {{ item.title }}
                    </li>
                </ul>
            </div>

            <!-- 文章内容区域 -->
            <div class="article-panel">
                <!-- 作者信息 -->
                <div class="author-info">
                </div>

                <!-- 文章内容 -->
                <div class="article">
                    <h1 class="article-title">{{ articleInfo.title }}
                        <div class="article-stats">
                            <div class="stat-item">
                                <span class="stat-label">阅读</span>
                                <span class="stat-value">{{ articleInfo.readCount }}</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">点赞</span>
                                <span class="stat-value">{{ articleInfo.likeCount }}</span>
                            </div>
                        </div>
                    </h1>

                    <!-- 标签 -->
                    <div class="article-tags">
                        <span v-for="tag in articleInfo.tags" :key="tag" class="tag">
                            {{ tag }}
                        </span>
                    </div>

                    <p class="text">{{ articleInfo.content }}</p>

                    <!-- 操作按钮 -->
                    <div class="article-actions">
                        <button class="btn-like" @click="handleLike">
                            👍 点赞 ({{ articleInfo.likeCount }})
                        </button>
                        <button class="btn-share">
                            📤 分享
                        </button>
                    </div>

                    <!-- 文章底部信息 -->
                    <div class="list-footer">
                        <div class="list-footer-left">
                            <div class="list-footer-left-avatar"></div>
                            <div class="list-footer-left-name">{{ articleInfo.author.name }}</div>
                        </div>
                        <div class="list-footer-right">
                            <div class="list-footer-right-time">发布于 {{ articleInfo.author.publishTime }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 评论区域 -->
        <div class="comments">
            <commentLists :comments="comments"></commentLists>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.main {
    width: 100%;
    // font-family: "Courier New", Courier, monospace;

    .content {
        display: flex;
        min-height: 500px;
        padding: 16px;
        padding-left: 100px;

        .directory {
            width: 250px;
            padding: 20px;
            border-radius: 8px;
            height: fit-content;
            position: sticky;
            top: 20px;

            h3 {
                margin-bottom: 15px;
            }

            ul {
                li {
                    padding: 8px 12px;
                    margin: 4px 0;
                    border-radius: 4px;
                    cursor: pointer;
                    transition: all 0.3s ease;

                    &:hover {
                        background: #e9e9e9;
                    }

                    &.level-1 {
                        font-weight: bold;
                    }

                    &.level-2 {
                        padding-left: 20px;
                        font-size: 14px;
                    }
                }
            }
        }

        .article-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .author-info {
            display: flex;
            align-items: center;
            border-radius: 8px;
        }

        .article {
            max-width: 1000px;
            width: 100%;

            .article-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 28px;
                margin-bottom: 16px;

                .article-stats {
                    display: flex;
                    gap: 20px;

                    .stat-item {
                        text-align: center;

                        .stat-label {
                            display: block;
                            font-size: 12px;
                        }

                        .stat-value {
                            display: block;
                            font-size: 16px;
                            font-weight: bold;
                        }
                    }
                }
            }

            .article-tags {
                margin-bottom: 24px;

                .tag {
                    display: inline-block;
                    padding: 4px 12px;
                    border-radius: 16px;
                    font-size: 12px;
                    margin-right: 8px;
                }
            }

            .text {
                font-size: 16px;
                line-height: 1.8;
                margin-bottom: 32px;
            }

            .article-actions {
                display: flex;
                gap: 12px;
                margin-bottom: 24px;

                button {
                    padding: 8px 16px;
                    border: 1px solid #ddd;
                    border-radius: 6px;
                    background: white;
                    cursor: pointer;
                    transition: all 0.3s ease;

                    &:hover {
                        background: #f5f5f5;
                    }

                    &.btn-like:hover {
                        background: #fff0f0;
                        border-color: #ff4757;
                    }
                }
            }

            .list-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 16px 0;
                border-top: 1px solid #eee;

                .list-footer-left {
                    display: flex;
                    align-items: center;

                    .list-footer-left-avatar {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        margin-right: 10px;
                        background: #000;
                    }

                    .list-footer-left-name {
                        font-weight: bold;
                    }
                }

                .list-footer-right-time {
                    font-size: 14px;
                }
            }
        }
    }

    .comments {
        font-family: normal;
        margin: 0 auto;
        width: 100%;
        max-width: 1000px;
        min-height: 300px;
        padding: 0 16px;
    }
}

// 响应式设计
@media (max-width: 768px) {
    .content {
        padding-left: 16px !important;

        .directory {
            display: none;
        }
    }
}
</style>